<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <script src="../lib/js/jquery-1.10.1.min.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../ajax/request.js"></script>
    <script src="../utils/cookie.js"></script>
    <script src="../utils/common.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../styles/css/index.css">
    <style>

    .tone{
        width:1200px;
        line-height: 45px;
        text-align:center;
        border-collapse: collapse;
        table-layout: fixed;
        margin:20px auto;
    }
    .tone  td{
        border:1px solid #000;
    }

    .cinfo{
        display: flex;
        padding:10px;
        height:120px;
        align-items: center;
    }
    .cimg{
        width:90px;
        height:90px;
    }
    .ctext{
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
    }
    .cart{
        text-align: center;
        margin:20px 0;
    }
    </style>
</head>
<body>
    <div class="page cart w">
        <h2>我的购物车</h2>
        <p><a href="./goodlist.html">查看商品 </a></p>
        <table id="cartTable w" class="tone">
            <thead>
                <tr>
                    <td style="width:60px;"> 序号</td>
                    <td  class="" style="width:60px;">选择</td>
                    <td class="" >商品</td>
                    <td style="width:100px;">单价</td>
                    <td style="width:180px;">数量</td>
                    <td style="width:100px;">小计</td>
                    <td style="width:90px;">操作</td>
                </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
        <div class="foot" id="foot">
            <p>
                <label for="quan">
                    全选反选
                    <input type="checkbox" id="quan">
                </label>
            </p>
           
            <div>
                合计: <span> 0 </span> 元 
            </div>
            <div>
                已选商品: <span> 0 </span>  件 
            </div>
            <div>
                <button class="f1"> 删除选择</button>
                <button href="">去结算 0</button>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            var odiv = document.createElement("div");
            $(odiv).attr("id",'head').load("../tpls/head.html",function(){}).prependTo($('body'));
            var odiv1 = document.createElement("div");
            $(odiv1).attr("id",'foot').load("../tpls/foot.html",function(){}).appendTo($('body'));

            let user = getCookie("useraccount");

            if(user){
                // 请求 ajax 
                getList()
            }else{
                layer.alert('你还未登录,请先登录', {
                        skin: 'layui-layer-molv' //样式类名
                        ,closeBtn: 0
                    }, function(){
                    location.href="./login.html?from=gooddetail";
                });
            }


            async function getList(){
                let res = await getCartList({
                    user:user
                })

                const {detail,status,result} = res;
                if(status){
                    $(".tbody").html('');
                    result.forEach((item,index)=>{
                        $(".tbody").append(`<tr id="item${index}">
                    <td> ${index+1} </td>
                    <td> 
                        <input type="checkbox" class="check-one check"/>
                    </td>
                    <td class="cinfo"> 
                        <img src='${item.goodsImg}' class="cimg"/>
                        <p class="ctext"> ${item.goodsName} </p>
                    </td>
                    <td> ${item.goodsPrice} </td>
                    <td> <button>减1</button> <input style="width:50px" type="number" value='${item.buynum}' />  <button>加1</button> </td>
                    <td> ${item.total} </td>
                    <td> 
                        <button class="del" data-id='${item.id}' >删除</button>    
                    </td>
                    </tr>`)
                    })
                }else{
                    $(".tbody").html("<tr> <td colspan='7'> <a href='index.html'>暂无商品数据,请前往商城购买</a>  </td> </tr>")
                }
                layer.msg(detail)
            }
        })

        $(".tbody").on("click",'.del',function(){
            console.log($(this).attr('data-id'))
            var id = $(this).attr('data-id');
            if(window.confirm("你真舍得删除这个商品?")){
                deleteOneById({id:id})
                .then(res=>{
                    var {status,detail}  = res;
                    if(status){
                        $(this).parent().parent().remove();
                    }
                    layer.msg(detail)
                })
            }
            
        })
        async function deleteById(id,e){
            console.log(id);
            if(window.confirm("你真舍得删除这个商品?")){
                let res = await deleteOneById({id:id});  
                console.log(res);
                var {status,detail}  = res;
                if(status){
                    getList();
                }
                alert(detail);
            }
        }
    </script>
</body>
</html>